<template>
  <div class="dialog">
    <el-dialog :title="title" :visible.sync="isShowDialogComponent"
               width="50%" :before-close="handleClose">
      <div class="dialog-desc" v-if="judgeId===0">(*此页均为必选项，且要先选择学科，后选择课程)</div>
      <div class="dialog-desc" v-else>(*此页学科和课程只做展示，不支持编辑操作，其余均为必选项)</div>
      <el-form ref="formRef" :model="form"
               label-width="100px"
               v-loading="loading" element-loading-text="拼命加载中......"
               element-loading-spinner="el-icon-loading">
        <el-form-item label="当前学期 :">
          <span>{{ semesterName }}</span>
        </el-form-item>
        <div class="selected-box">
          <el-form-item label="选择学科 :">
            <el-select :disabled="judgeId!==0" v-model="selectedCompanySubject"
                       @change="companySubjectChange" placeholder="请选择学科">
              <el-option
                v-for="(item,index) in companySubjectList"
                :key="index"
                :label="item.Text"
                :value="item.Value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择课程 :" class="choose-curriculum">
            <el-select :disabled="judgeId!==0" v-model="form.CurriculumID">
              <el-option
                v-for="(item,index) in companyCurriculumList"
                :key="index"
                :label="item.Text"
                :value="item.Value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>

        <el-form-item label="选择时段 :">
          <el-radio v-model="form.TimeInterval" label="上午">上午</el-radio>
          <el-radio v-model="form.TimeInterval" label="下午">下午</el-radio>
          <el-radio v-model="form.TimeInterval" label="晚上">晚上</el-radio>

        </el-form-item>

        <el-form-item label="选择星期 :">
          <el-select v-model="form.Week" placeholder="请选择星期">
            <el-option
              v-for="(item,index) in weekOptions"
              :key="index"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择时间 :">
          <el-time-select
            placeholder="上课时间"
            v-model="form.StartTime"
            :picker-options="{
             start: '08:00',
             step: '00:30',
             end: '22:00'}">
          </el-time-select>
          <span class="end-time">
                 <el-time-select
                   placeholder="下课时间"
                   v-model="form.EndTime"
                   :picker-options="{
             start: '08:00',
             step: '00:30',
             end: '22:00',
             minTime: form.StartTime}">
          </el-time-select>
          </span>

        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose" :disabled="loading">取 消</el-button>
        <el-button type="primary" @click="submitEvent" :disabled="loading">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
//引入封装的接口的类名
import Semester from '../../../model/semester'
import CompanySubject from '../../../model/companySubject'
import CompanyCurriculum from '../../../model/companyCurriculum'
import CompanyCurriculumDetails from '../../../model/companyCurriculumDetails'

export default {
  name: 'AddAndEditDialog',
  props: {
    title: String,
    isShowDialogComponent: Boolean,
    judgeId: Number
  },
  data () {
    return {
      loading: false,
      form: {
        ID: '',
        CurriculumID: '',
        TimeInterval: '',
        Week: '',
        StartTime: '',
        EndTime: ''
      },
      //保存获取的学期的名称
      semesterName: [],
      //学科下拉框中选中项的值
      selectedCompanySubject: '',
      //保存获取的学科集合
      companySubjectList: [],
      //保存获得的课程集合
      companyCurriculumList: [],
      //星期weekOptions
      weekOptions: [{
        value: '星期一',
        label: '星期一'
      }, {
        value: '星期二',
        label: '星期二'
      }, {
        value: '星期三',
        label: '星期三'
      }, {
        value: '星期四',
        label: '星期四'
      }, {
        value: '星期五',
        label: '星期五'
      }, {
        value: '星期六',
        label: '星期六'
      }, {
        value: '星期日',
        label: '星期日'
      }],
    }
  },
  created () {
    this.judgeEditButton()
    this.getCompanyCurriculumId()
  },
  methods: {
    handleClose (payload) {
      this.$emit('handleClose', payload)
    },
    //获取课程id
    async getCompanyCurriculumId () {
      //1.获取当前启用的学期的id
      const semesterResult = await Semester.GetCurrentSemester()
      this.semesterName = semesterResult[0].Text
      //2.获取学科信息
      this.companySubjectList = await CompanySubject.PageSearchList({ ID: semesterResult[0].Value })
    },
    //学科下拉框选中值变化时候触发-------选择学科后再选择课程
    async companySubjectChange (value) {
      this.selectedCompanySubject = value
      this.companyCurriculumList = await CompanyCurriculum.PageSearchList({ ID: this.selectedCompanySubject })
      if (this.companyCurriculumList.length === 0) {
        this.$message.error({
          message: '该学科下暂未添加课程，请前往添加',
          offset: 200
        })
      }
    },
    //判断点击的是否是编辑按钮
    async judgeEditButton () {
      if (this.judgeId !== 0) {
        const res = await CompanyCurriculumDetails.SearchModelDetails({ ID: this.judgeId })
        this.form = res
        this.form.CurriculumID = res.ClassName
        this.selectedCompanySubject = res.SubjectName
      }
    },
    async submitEvent () {
      //判断必填项是否都选了
      if (this.selectedCompanySubject === '') {
        this.$message.error('学科为必选项')
      } else if (this.form.CurriculumID === '') {
        this.$message.error('课程为必选项')
      } else if (this.form.TimeInterval === '') {
        this.$message.error('时段为必选项')
      } else if (this.form.Week === '') {
        this.$message.error('星期为必选项')
      } else if (this.form.StartTime === null || this.form.StartTime === '') {
        console.log('-------------开始时间')
        this.$message.error('起始时间为必选项')
      } else if (this.form.EndTime === null || this.form.EndTime === '') {
        console.log('-------------结束时间')
        this.$message.error('结束时间为必选项')
      } else {
        try {
          //判断是否点击的添加
          if (this.judgeId === 0) {
            if (this.form.CurriculumID === '') {
              this.$message.error('请先为该学科下添加课程后再进行选择')
            } else {
              this.loading = true
              await CompanyCurriculumDetails.Add(this.form)
              this.loading = false
              this.$message.success('添加课程详情成功')
              this.handleClose('submitButton')
            }
          } else {
            this.loading = true
            this.form.ID = this.judgeId
            await CompanyCurriculumDetails.Update(this.form)
            this.loading = false
            this.$message.success('编辑课程详情成功')
            this.handleClose('submitButton')
          }
        } catch (err) {
          this.loading = false
        }
      }
    },

  }
}
</script>

<style scoped>
.dialog {
  position: relative;
}

.dialog-desc {
  position: absolute;
  top: 25px;
  left: 130px;
  color: #DC143C;
  font-weight: bold;
}

.selected-box {
  display: flex;
}

.choose-curriculum {
  margin-left: 80px;
}

.end-time {
  padding: 0 30px;
}
</style>
